import { Button, DatePicker, Form, Select, Table,Image } from "antd"
import { DeleteOutlined, EyeOutlined, EditOutlined, SearchOutlined } from '@ant-design/icons';
import './index.css'

// 引如获取订单详情api
import * as api from '@/api/pay'

// 引入自定义icon图标
import { createFromIconfontCN } from '@ant-design/icons';
import { ColumnsType, TableProps } from "antd/lib/table";
import { Fragment, ReactNode, useEffect, useState } from "react";
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3608375_ix1m6qxxbfa.js'// 在 iconfont.cn 上生成
})
// 下拉选框select的Option
const { Option } = Select;
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
};
// 声明表格数据类型
interface DataType {
    key: React.Key;
    name: string;
    chinese: number;
    math: number;
    english: number;
}
const onChange = (value: string) => {
    console.log(`selected ${value}`);
};

const onSearch = (value: string) => {
    console.log('search:', value);
};

let el: ReactNode = (
    <div className='table-elect'>
        <span>每页显示</span>
        <Select defaultValue="5行" style={{ width: 80 }} onChange={handleChange}>
            <Option value="5">5条</Option>
            <Option value="10">10条</Option>
            {/* <Option value="disabled" disabled>
                    Disabled
                </Option> */}
            <Option value="12">12条</Option>
        </Select>
    </div>
)
// let data: DataType[] = [];
const Refund = () => {
    // rowSelection object indicates the need for row selection
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    // 表格列
    const columns: ColumnsType<DataType> = [
        {
            title: '订单编号',
            dataIndex: 'name',
        },
        {
            title: '产品名称',
            dataIndex: 'chinese',
            sorter: {
                compare: (a, b) => a.chinese - b.chinese,
                multiple: 3,
            },
        },
        {
            title: '交易金额(元)',
            dataIndex: 'math',
            sorter: {
                compare: (a, b) => a.math - b.math,
                multiple: 2,
            },
        },
        {
            title: '交易时间',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
        {
            title: '退款数量',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
        {
            title: '状态',
            dataIndex: 'english',
            sorter: {
                compare: (a, b) => a.english - b.english,
                multiple: 1,
            },
        },
        {
            title: '说明',
            dataIndex: 'english',
        },
        {
            title: '操作',
            dataIndex: 'english',
        },
    ];
    const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    };

    //控制modal显示隐藏
    let [show, setShow] = useState(false)
    const [loading, setLoading] = useState(false);
    const [order, setOrder] = useState()
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');

    let getOrderList = () => {
        setLoading(true)
        api.getOrder()
            .then(res => {
                console.log(res.data.data);
                res.data.data.forEach((item: any) => {
                    item.image = <Image src={item.orderDetail[0].imageUrl} width={30} height={20} />
                    item.key = item._id
                    item.name=item.orderDetail[0].productName
                    item.action = <Fragment>
                        <Button icon={<EyeOutlined />}>查看</Button>
                        <Button icon={<EditOutlined />}>编辑</Button>
                        <Button onClick={() => {
                            //弹出确认框
                            setShow(true)
                        }} danger icon={<DeleteOutlined onClick={() => {
                            //弹出确认框
                            setShow(true)
                        }} />}>删除</Button>
                    </Fragment>

                    setOrder(res.data.data)
                    setLoading(false)
                })

            })

    }
    useEffect(() => {
        getOrderList()
    }, [])
    return (
        <div className="refund">
            <div className="search">
                产品名称：<Select className="search-select"
                    showSearch
                    placeholder="请输入品牌名称"
                    optionFilterProp="children"

                    filterOption={(input, option) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="tom">Tom</Option>
                </Select>
                <Form.Item className="time" label="添加时间">
                    <DatePicker placeholder="请选择时间" />
                </Form.Item>
                <Button className="search-btn" type="primary" icon={<SearchOutlined />}>
                    查询
                </Button>
            </div>
            <div className="order">
                <Button type="primary"><MyIcon type='icon-kongxinduigou' />已退订单</Button>
                <Button className='btn_now'><MyIcon type='icon-caidan' />未退订单</Button>
                <Button className='btn_del'><MyIcon type='icon-shanchu_o' />批量删除</Button>
            </div>

            <Table bordered rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }} columns={columns} dataSource={order} onChange={onChange} title={() => { return el; }} loading={loading} />
        </div>
    )
}

export default Refund